<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>门票价格区间分布分析</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://assets.pyecharts.org/assets/v5/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #2c3e50;
            font-weight: 600;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }

        .header p {
            font-size: 1.1rem;
            color: #555;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .chart-card {
            background: #ffffff;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            padding: 30px;
            margin-bottom: 30px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .chart-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            margin-bottom: 25px;
            border-bottom: 1px solid #eee;
            padding-bottom: 15px;
        }

        .card-header h2 {
            font-size: 1.8rem;
            color: #3498db;
            display: flex;
            align-items: center;
        }

        .card-header h2 i {
            margin-right: 10px;
            background: #e1f0fa;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #3498db;
        }

        .card-description {
            color: #666;
            font-size: 1.05rem;
            line-height: 1.6;
            margin-top: 10px;
        }

        .chart-container {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
        }

        .pie-chart-wrapper {
            flex: 1;
            min-width: 700px;
            height: 600px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .data-table-wrapper {
            flex: 1;
            min-width: 600px;
            background: white;
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
            height: fit-content;
        }

        .price-table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            box-shadow: 0 0 10px rgba(0,0,0,0.03);
            border-radius: 8px;
            overflow: hidden;
        }

        .price-table th {
            background: linear-gradient(to bottom, #3498db, #2980b9);
            color: white;
            padding: 18px 25px;
            text-align: left;
            font-weight: 600;
            font-size: 1.1rem;
        }

        .price-table td {
            padding: 16px 25px;
            border-bottom: 1px solid #f0f4f8;
            transition: background-color 0.2s;
        }

        .price-table tr:nth-child(even) {
            background-color: #f8fafd;
        }

        .price-table tr:hover {
            background-color: #e8f4ff;
        }

        .price-table tr:last-child {
            font-weight: bold;
            background-color: #f1f8ff;
            color: #2c3e50;
        }

        .price-table tr:last-child:hover {
            background-color: #e1f0ff;
        }

        .price-interval {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .color-indicator {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            margin-right: 10px;
        }

        .highlight {
            animation: highlight 1.5s ease;
            background-color: #e1f0fa;
        }

        @keyframes highlight {
            0% { background-color: rgba(52, 152, 219, 0.2); }
            100% { background-color: transparent; }
        }

        .explanation-section {
            background: #f9fbfd;
            border-radius: 12px;
            padding: 25px;
            margin-top: 30px;
            border-left: 4px solid #3498db;
        }

        .explanation-section h3 {
            color: #3498db;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            font-size: 1.4rem;
        }

        .explanation-section ul {
            padding-left: 25px;
        }

        .explanation-section li {
            margin-bottom: 12px;
            line-height: 1.6;
            position: relative;
            font-size: 1rem;
        }

        .explanation-section li:before {
            content: "•";
            color: #3498db;
            font-weight: bold;
            position: absolute;
            left: -20px;
            font-size: 1.2rem;
        }

        .footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.95rem;
        }

        .interactive-controls {
            display: flex;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            background: #3498db;
            color: white;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 1rem;
        }

        .btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid #3498db;
            color: #3498db;
        }

        .btn-outline:hover {
            background: #e1f0fa;
        }

        .legend {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-top: 25px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            background: #f0f7ff;
            border-radius: 24px;
            font-size: 1rem;
            min-width: 150px;
            justify-content: space-between;
        }

        .legend-color {
            width: 18px;
            height: 18px;
            border-radius: 4px;
        }

        .legend-label {
            margin-left: 8px;
            font-weight: 500;
        }

        .legend-value {
            font-weight: bold;
            padding-left: 10px;
        }

        @media (max-width: 1200px) {
            .chart-container {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>景点门票价格分布分析</h1>
        <p>本图表展示了全国景点门票价格在不同区间的分布情况，帮助了解旅游消费结构和价格趋势</p>
    </div>

    <div class="chart-card">
        <div class="card-header">
            <h2><i>📊</i> 门票价格区间分布</h2>
            <p class="card-description">饼图直观展示了不同价格区间的景点数量占比，右侧表格提供了详细的数据统计</p>
        </div>

        <div class="chart-container">
            <div id="pricePieChart" class="pie-chart-wrapper"></div>

            <div class="data-table-wrapper">
                <h3 style="margin-bottom: 25px; color: #2c3e50;">价格分布数据详情</h3>
                <div id="log" class="table-container">
                    <!-- 表格将在这里动态生成 -->
                </div>

                <div class="interactive-controls">
                    <button class="btn" id="highlightFree">
                        <i>🔍</i> 高亮免费景点
                    </button>
                    <button class="btn btn-outline" id="resetView">
                        <i>🔄</i> 重置视图
                    </button>
                </div>

                <div class="legend">
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #5470c6;"></div>
                        <span class="legend-label">免费 (0元)</span>
                        <span class="legend-value">35.00%</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #91cc75;"></div>
                        <span class="legend-label">低价 (1-50元)</span>
                        <span class="legend-value">26.71%</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #fac858;"></div>
                        <span class="legend-label">经济 (51-100元)</span>
                        <span class="legend-value">18.86%</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #ee6666;"></div>
                        <span class="legend-label">中档 (101-200元)</span>
                        <span class="legend-value">12.14%</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-color" style="background-color: #73c0de;"></div>
                        <span class="legend-label">高档 (201元以上)</span>
                        <span class="legend-value">7.29%</span>
                    </div>
                    <div class="legend-item" style="background: none; padding: 0;">
                        <div style="font-weight: bold; font-size: 1.1rem; margin-left: 10px;">总计景点数量: 7,000</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="chart-card">
        <div class="explanation-section">
            <h3><i>💡</i> 数据分析说明</h3>
            <ul>
                <li><strong>免费景点</strong>：占比最高的区间，表明许多景点采取免费策略吸引游客</li>
                <li><strong>低价区间 (1-50元)</strong>：覆盖了大多数普通景点，适合大众消费</li>
                <li><strong>经济区间 (51-100元)</strong>：通常是具有一定特色或服务的中等景点</li>
                <li><strong>中档区间 (101-200元)</strong>：多为知名景点或特殊景区，提供更多游览体验</li>
                <li><strong>高档区间 (201元以上)</strong>：通常是高端旅游景点或包含附加服务的套票</li>
                <li><strong>整体分布</strong>：中国景点门票价格呈现金字塔结构，低价和免费景点占主导地位</li>
            </ul>
        </div>
    </div>

    <div class="footer">
        <p>© 2023 旅游数据分析平台 | 数据更新时间: 2023年10月15日</p>
    </div>
</div>

<script>
    // 模拟数据
    const mockData = {
        code: 0,
        data: [
            { name: "免费 (0元)", value: 2450 },
            { name: "低价 (1-50元)", value: 1870 },
            { name: "经济 (51-100元)", value: 1320 },
            { name: "中档 (101-200元)", value: 850 },
            { name: "高档 (201元以上)", value: 510 }
        ]
    };

    $(document).ready(function() {
        // 初始化图表
        const chart = echarts.init(document.getElementById('pricePieChart'), 'white', { renderer: 'canvas' });

        // 定义颜色
        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];

        // 处理数据
        const response = mockData;
        const total = response.data.reduce((sum, item) => sum + item.value, 0);

        // 创建表格HTML
        let tableHTML = `
            <table class="price-table">
                <thead>
                    <tr>
                        <th>价格区间</th>
                        <th>景点数量</th>
                        <th>占比</th>
                    </tr>
                </thead>
                <tbody>
        `;

        // 添加表格行
        response.data.forEach((item, index) => {
            const percentage = total > 0 ? ((item.value / total) * 100).toFixed(2) : '0.00';
            tableHTML += `
                <tr id="row-${index}">
                    <td>
                        <div class="price-interval">
                            <div class="color-indicator" style="background-color: ${colors[index]};"></div>
                            ${item.name}
                        </div>
                    </td>
                    <td>${item.value.toLocaleString()}</td>
                    <td>${percentage}%</td>
                </tr>
            `;
        });

        // 添加总计行
        tableHTML += `
                <tr>
                    <td><strong>总计</strong></td>
                    <td><strong>${total.toLocaleString()}</strong></td>
                    <td><strong>100.00%</strong></td>
                </tr>
            </tbody>
            </table>
        `;

        // 渲染表格
        $('#log').html(tableHTML);

        // 配置图表选项
        const option = {
            title: {
                text: '门票价格区间分布',
                left: 'center',
                top: 20,
                textStyle: {
                    fontSize: 22,
                    fontWeight: 'bold',
                    color: '#2c3e50'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    const percent = params.percent;
                    return `
                        <div style="font-weight:bold;margin-bottom:5px;">${params.name}</div>
                        <div>景点数量: ${params.value.toLocaleString()}</div>
                        <div>占比: ${percent}%</div>
                    `;
                },
                backgroundColor: 'rgba(255, 255, 255, 0.95)',
                borderColor: '#ddd',
                textStyle: { color: '#333' },
                extraCssText: 'box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 12px;'
            },
            legend: {
                orient: 'vertical',
                right: '10%',
                top: 'center',
                itemWidth: 20,
                itemHeight: 12,
                textStyle: {
                    fontSize: 14,
                    fontWeight: 500
                },
                formatter: function(name) {
                    const item = response.data.find(d => d.name === name);
                    const percent = ((item.value / total) * 100).toFixed(1);
                    return `${name} (${percent}%)`;
                }
            },
            series: [
                {
                    name: '门票价格区间',
                    type: 'pie',
                    radius: ['30%', '75%'],
                    center: ['40%', '50%'],
                    roseType: 'radius',
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}: {d}%',
                        fontSize: 16,
                        fontFamily: 'Microsoft YaHei'
                    },
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.2)'
                        },
                        label: {
                            show: true,
                            fontWeight: 'bold',
                            fontSize: 18
                        }
                    },
                    data: response.data.map((item, index) => ({
                        ...item,
                        itemStyle: {
                            color: colors[index]
                        }
                    }))
                }
            ],
            animationDuration: 2000,
            animationEasing: 'elasticOut'
        };

        // 设置图表选项
        chart.setOption(option);

        // 添加图表点击事件
        chart.on('click', function(params) {
            // 移除之前的高亮
            $('.price-table tr').removeClass('highlight');

            // 高亮对应的表格行
            $(`#row-${params.dataIndex}`).addClass('highlight');

            // 滚动到高亮行
            $('html, body').animate({
                scrollTop: $(`#row-${params.dataIndex}`).offset().top - 200
            }, 500);
        });

        // 添加表格行点击事件
        $('.price-table tr').click(function() {
            const index = $(this).index() - 1; // 减去表头行
            if (index >= 0 && index < response.data.length) {
                // 触发图表点击事件
                chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: index
                });

                // 显示图表tooltip
                chart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: index
                });
            }
        });

        // 高亮免费景点按钮
        $('#highlightFree').click(function() {
            // 高亮免费景点行
            $('.price-table tr').removeClass('highlight');
            $('#row-0').addClass('highlight');

            // 高亮免费景点饼图区块
            chart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: 0
            });

            // 显示tooltip
            chart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: 0
            });

            // 滚动到高亮行
            $('html, body').animate({
                scrollTop: $('#row-0').offset().top - 200
            }, 500);
        });

        // 重置视图按钮
        $('#resetView').click(function() {
            // 移除所有高亮
            $('.price-table tr').removeClass('highlight');

            // 取消图表高亮
            chart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0
            });
        });

        // 响应式调整
        window.addEventListener('resize', function() {
            chart.resize();
        });
    });
</script>
</body>
</html>